<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template>
  <div>
    <el-button type="text">
      <span class="mat-button-wrapper">
        <i class="icon iconfont icon-book text-size-24 col-ff4"></i>
        <span class="col-ff">{{userName}}</span>
      </span>
    </el-button>
    <el-dropdown trigger="click" class="pull-right">
      <span @click="commit">
        <el-button round class="bg-3f5 bor-col-3f5 text-size-16 col-ff" type="text">提交</el-button>
      </span>
      <span @click="publish">
        <el-button round class="bg-3f5 bor-col-3f5 text-size-16 col-ff" type="text">发布</el-button>
      </span>
      <span class="el-dropdown-link">
        <el-button icon="el-icon-more" round class="bg-3f5 bor-col-3f5 text-size-24 col-ff" type="text"></el-button>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <i class="icon iconfont icon-tuichudenglu"></i>
          <span>退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  export default {
    name: 'head',
    data () {
      return {
        userName: 'liuxia',
        avatorPath: ''
      }
    },
    computed: {
      userModel: {
        // getter
        get: function () {
          return this.$store.state.userModel;
        }
      }
    },
    methods: {
      publish () {
        const _this = this;
        this.services.git.push(this.userModel).then((data) => {
          console.log(data);
          _this.$notify({
            title: '成功',
            message: '发布成功',
            type: 'success'
          });
        })
      },
      commit () {
        const _this = this;
        this.$prompt('请输入提交信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的提交信息是: ' + value
          });
          this.services.git.commit(this.userModel, value).then((data) => {
            _this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
    },
    watch: {},
    created: function () {

    }
  }
</script>
